@use "~/styles/variables.scss" as *;

.article-detail-page {
    padding: 0;
    line-height: 40rpx;
    .user-info {
        .user-avator {
            width: 70rpx;
            height: 70rpx;
            border-radius: 50%;
        }
        .user-name {
            padding: 0 20rpx;
        }
    }
    .page-body {
        width: 700rpx;
        margin: 25rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx); /* 兼容 iOS < 11.2 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx); /* 兼容 iOS >= 11.2 */
        .article-preview-component {
            .swiper-container {
                height: 1000rpx;
                margin-bottom: 15rpx;
            }
            .article-img-container {
                width: 700rpx;
                height: 1000rpx;
                .article-img {
                    width: 100%;
                    height: 100%;
                    border-radius: 8rpx;
                }
            }
            .title {
                font-weight: 500;
                line-height: 60rpx;
            }
            .content {
                width: 100%;
                text-indent: 1rem;
            }
            .time-formart {
                opacity: 0.6;
                line-height: 60rpx;
                margin-top: 25rpx;
            }
        }
        .article-edit-component {
            width: 700rpx;
            margin: 25rpx 0;
            .img-list-component {
                min-width: 700rpx;
            }
            .tip {
                width: 100%;
                color: $color-warning;
            }
            .article-input {
                padding: 25rpx;
                border-radius: 10rpx;
                box-sizing: border-box;
                width: 700rpx;
                margin: 20rpx 0;
                background: rgba(0,0,0,0.05);
            }
            .title-input {
                min-height: 100rpx;
            }
            .content-input {
                min-height: 210rpx;
            }
        }
    }
    .page-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 122rpx;
        width: 750rpx;
        z-index: 99;
        padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
        padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
        .half-line {
            border-bottom: 1rpx solid;
            width: 200%;
            transform: scale(0.5);
            opacity: 0.2;
        }
        .comment-input-container {
            width: 100%;
            height: 120rpx;
            padding: 25rpx;
            box-sizing: border-box;
            .comment-input {
                height: 60rpx;
                line-height: 60rpx;
                opacity: 0.5;
                border-radius: 40rpx;
                padding: 10rpx 25rpx;
                background-color: rgba(0,0,0,0.1);
                margin-right: 10rpx;
            }
            .data-item {
                padding-left: 25rpx;
                font-weight: 500;
                color: $color-primary;
                position: relative;
                overflow: hidden;
                .share-btn {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                    opacity: 0;
                }
            }
            .btn {
                height: 80rpx;
                box-sizing: border-box;
                border-radius: 40rpx;
                color: #fff;
                text-align: center;
            }
            .preview-btn {
                background-color: rgba(0,0,0,0.4);
                width: 160rpx;
            }
            .save-btn {
                background-color: red;
                width: 460rpx;
            }
        }
    }
}